<template>
  <div id="app" class="product-pre-check">
    <!-- 头部导航 -->
    <van-nav-bar ref="header" left-arrow title="成品冻结" @click-left="comeBack" left-text="返回">
      <template #title>
        <span @click="prevDayFn">前一天</span>
        <span @click="showCalendar = true" style="margin: 0 10px;">{{ queryDate }}</span>
        <span @click="nextDayFn">后一天</span>
      </template>
      <template #right>
        <span @click="showAddDialog = true"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>

    <!-- 总计 -->
    <van-cell class="freeze-data-total" v-show="checkData.length !== 0" title="总数" :value="checkData.length"></van-cell>

    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="checkData" :pulldown="true" @pulldown="refreshPageFn">
      <van-swipe-cell v-for="row in checkData" :key="row.id" style="padding-bottom: 0.5rem">
        <template>
          <div class="data-card">
            <div style="border-bottom: 1px solid #8191c5; font-size: 1.1rem;color: #1677FF;justify-content: space-between">
              <span>{{ row.designNo }}</span>
            </div>
            <div style="justify-content: space-between">
              <span style="color: #e6a23c">匹号: {{ row.designSeqNo }}</span>
              <span>颜色: {{ row.colorNo }}</span>
            </div>
            <div>
              <span style="flex: 0 0 23vw;">预检备注: </span>
              <span>{{ row.checkRemark }}</span>
            </div>
            <div style="justify-content: space-between;font-size: 1rem; border-top: 1px solid #8191c5">
              <span>{{ row.checker }}</span>
              <span>{{ row.checkAt }}</span>
            </div>
          </div>
        </template>
        <template #right>
          <van-button square text="删除" type="danger" @click="delPreCheckDataFn(row)" />
        </template>
      </van-swipe-cell>
    </better-scroll>

    <van-dialog v-model="showAddDialog" title="成品预检" show-cancel-button @confirm="openScanWinFn">
      <van-field label="预检备注" label-width="16vw" colon type="textarea" rows="3" v-model="checkRemark"></van-field>
    </van-dialog>

    <!-- 日期筛选 -->
    <van-calendar v-model="showCalendar" :min-date="minDate" :max-date="maxDate" :round="false" @confirm="confirmDayFn"></van-calendar>
  </div>
</template>

<script>
import {comeBack} from "@/utils";
import dayjs from "dayjs";
import {preCheckProduct, clothNoteDetail, loadPreCheckProductData, cancelPreCheckProduct} from "@/api/product";

export default {
  name: "productPreCheck",
  data() {
    return {
      /* 查询相关 */
      showCalendar: false,
      queryDate: dayjs().format("YYYY-MM-DD"),
      minDate: new Date(dayjs().subtract(1, "year")),
      maxDate: new Date(),
      queryParam: {
        pageNum: 1,
        pageSize: 6,
      },

      /* 列表相关 */
      checkData: [],

      /* 操作相关 */
      showAddDialog: false,
      checkRemark: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    comeBack,

    //初始化
    initFn(that) {
      that.loadPreCheckDataFn(that, 1);
    },

    // 前一天
    prevDayFn() {
      let that = this;
      that.queryDate = dayjs(that.queryDate).subtract(1, "day").format("YYYY-MM-DD");
      that.refreshPageFn();
    },
    // 后一天
    nextDayFn() {
      let that = this;
      if (that.queryDate === dayjs().format("YYYY-MM-DD")) {
        that.$toast.fail("明天还没到");
        return false;
      }
      that.queryDate = dayjs(that.queryDate).add(1, "day").format("YYYY-MM-DD");
      that.refreshPageFn();
    },
    // 时间筛选
    confirmDayFn(val) {
      let that = this;
      that.queryDate = dayjs(val).format("YYYY-MM-DD");
      that.showCalendar = false;
    },

    //打开扫码窗口
    openScanWinFn() {
      const that = this;
      if(that.checkRemark == "") {
        that.$toast.fail("必须输入预检备注");
        return;
      }
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (content.indexOf("http://") >= 0) {
            content = content.substring(content.lastIndexOf("/") + 1, content.length);
          }
          let contents = content.split("?");
          let params = {};
          params.greyClothId = contents[0];
          params.checkRemark = that.checkRemark;
          params.warnFlag = 1;
          if(contents[1]) {   //翻译greyClothId
            clothNoteDetail({
              id: contents[0],
              flag: 1
            }, res => {
              params.greyClothId = res.greyClothId;
              that.preCheckProductSubFn(that, params);
            });
          } else {
            that.preCheckProductSubFn(that, params);
          }
        }
      });
    },
    preCheckProductSubFn(that, params) {
      preCheckProduct(params, () => {
        that.loadPreCheckDataFn(that, 1);
        that.openScanWinFn();
      });
    },

    //加载列表
    loadPreCheckDataFn(that, pageNum) {
      if(pageNum == 1) {
        that.checkData.splice(0, that.checkData.length);
        that.queryParam.pageNum = pageNum;
      }
      that.queryParam.beginAt = that.queryDate;
      that.queryParam.endAt = dayjs(that.queryDate).add(1, "day");
      loadPreCheckProductData(that.queryParam, data => {
        console.log(data)
        that.totalPage = data.length;
        data.forEach(row => {
          that.checkData.push(row);
        });
      });
    },

    //刷新
    refreshPageFn() {
      const that = this;
      that.checkData.splice(0, that.checkData.length);
      that.loadPreCheckDataFn(that, 1);
    },

    //删除
    delPreCheckDataFn(row) {
      const that = this;
      cancelPreCheckProduct({
        checkId: row.id
      }, () => {
        that.$toast.success("删除成功");
        that.refreshPageFn();
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.product-pre-check {
  height: 100%;
  .van-nav-bar__title {
    span {
      font-size: 14px;
      &:first-child {
        color: #1989fa;
      }
      &:last-child {
        color: #ee0a24;
      }
    }
  }

  .public-scroll {
    height: 79vh;
    .van-swipe-cell__right {
      display: flex;
      flex-flow: column;
    }
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
      }
    }
  }
}
</style>